<link rel="stylesheet" href="/css/afterLoginPage.css">
<style>
#showCopperImg {
	width: 100%;
	height: 300px;
}
.copper-img-show {
	max-width:100%;
    max-height:300px;
    width: 80%;
}
.layui-upload-button {
    cursor: pointer;
}
.show-preview {
	margin-top: 20px;
	margin-left:90px;
}
.show-preview .preview-lg {
    width: 150px;
    height: 150px;
    display: inline-block;
    margin-left: 10px;
}
.show-preview .preview-md {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin-left: 10px;
}
.show-preview .preview-sm {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 10px;
}
.layui-layer-btn0 {
    background-color: #c9302c !important;
    border-color: #ac2925 !important;
}
.layui-layer-btn1{
	border-color: #4898d5 !important;
    background-color: #2e8ded !important;
    color: #fff !important;
}
.layui-form-label-90{
	width:90px!important;
	font-family:PingFangSC-Medium;
	font-size:14px;
	color:rgb(71, 71, 71);
}
/* 移动端 */
@media screen and (max-width: 414px),@media screen  and (orientation: landscape),
only screen and (max-device-width: 414px) {
	.layui-form-item {
	    margin-bottom: 0.4rem;
	}
	.layui-form-label {
	    padding: 0.24rem 0.4rem;
	    width: 2.133333rem;
	}
	.layui-form-label, .layui-form-mid, .layui-input, .layui-textarea, .layui-form-radio span {
	    font-size: 0.373333rem !important;
	    line-height: normal;
	}
	.layui-form-item .layui-input-inline {
	    width: 5.066667rem;
	    margin-right: 0.266667rem;
	}
	.layui-input, .layui-select, .layui-textarea {
	    height: 1.013333rem;
	    line-height: 1.013333rem;
	    border: 0.026667rem solid #b3b3b3;
	    border-radius: 0.053333rem;
	}
	.layui-input, .layui-textarea {
	    padding-left: 0.266667rem;
	}
	.layui-form-mid {
	    padding: 0;
	    margin-left: 0;
	    text-align: left;
	    margin-right: 0;
	}
	.layui-btn{
		margin-left: 2.9rem!important;
		margin-top:0.266667rem!important;
	    height: 1.013333rem;
	    line-height: 1.013333rem;
	    padding: 0 0.48rem;
	    font-size: 0.373333rem;
	    border-radius: 0.053333rem;
	}
}




</style>
<div class="main layui-clear" style="min-height: 600px;position: relative;margin-bottom: 33px;">
	<div class="layui-bar">
    	<div class="layui-breadcrumbs">
    		<a class="home" href="/"></a>
			<i class="layui-icon">&#xe602;</i>
	  		<a href="/user/profile.html">个人资料</a>
	  		<i class="layui-icon">&#xe602;</i>
	  		<a href="/user/changpassword.html">密码修改</a>
    	</div>
    </div>
    <#include "/apps/user/userTopInformation.html">
	 <div class="ukefu-profile-menu">
		<#include "/apps/user/userinfo.html">
	</div>
	
	<div class="ukefu-profile">
		<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin:10px 20px;">
			<#include "/apps/user/profilemenu.html">
			<div class="layui-tab-content">
				<div class="layui-tab-item layui-show">
					<div class="layui-form mine-view" style="display: block;">
			          <div class="layui-form-item">
			            <label for="L_nowpass" class="layui-form-label">当前密码</label>
			            <div class="layui-input-inline">
			              <input type="password" id="L_nowpass" name="nowpass" required="" lay-verify="required" autocomplete="off" class="layui-input">
			            </div>
			          </div>
			          <div class="layui-form-item">
			            <label for="L_pass" class="layui-form-label">新密码</label>
			            <div class="layui-input-inline">
			              <input type="password" id="L_pass" name="pass" required="" lay-verify="pass" autocomplete="off" class="layui-input">
			              <div class="layui-form-mid layui-word-aux" id="passMsg" style="color:red!important" >8到16个字符</div>
			            </div>
			          </div>
			          <div class="layui-form-item">
			            <label for="L_repass" class="layui-form-label">确认密码</label>
			            <div class="layui-input-inline">
			              <input type="password" id="L_repass" name="repass" required="" lay-verify="repass" autocomplete="off" class="layui-input">
			            </div>
			            <div class="layui-form-mid layui-word-aux" id="repassMsg" style="color:red!important"></div>
			          </div>
			          <div class="layui-form-item">
			            <button style="margin-left: 110px;margin-top: 10px;" class="layui-btn" key="set-mine" lay-filter="*" lay-submit="" onclick="changepwd()">确认修改</button>
			          </div>
			      </div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	var URL = window.URL || window.webkitURL;
	layui.use(['element','form'], function(){
	  var element = layui.element() , form = layui.form();
	  
	});
	
	layui.use('layer', function(){
	  var layer = layui.layer;
	  <#if msg?? && msg == '0'>
		layer.alert('用户名已经存在，请重新填写', {icon: 2});
	  <#elseif msg?? && msg == '1'>
		layer.alert('用户信息修改成功！', {icon: 1}); 
	  </#if>
	});
	
	//修改密码
	function changepwd(){
		$('#repassMsg, #passMsg').text("");
		var passwordNumber = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{8,16}$/;
		if(!passwordNumber.test($('#L_pass').val())){
			$('#passMsg').text("8~16位,数字,字母,字符至少包含两种");
			return false;
		}
		if($('#L_pass').val() != $('#L_repass').val()){
			$('#repassMsg').text("确认密码和新密码不一致");
			return false;
		}
		$.ajax({
			type: "post",
			url: "/user/changePwd",
			data:{"oldPwd":$('#L_nowpass').val(),"newPwd":$('#L_pass').val(),"confirmPwd":$('#L_repass').val()},
			success: function(data){
				if(data == "success"){
					layer.alert('密码修改成功！', {icon: 1});
					window.location.href = "/login.html";
				}if(data == "oldPwdError"){
					layer.alert('原始密码错误！', {icon: 2});
					$("#L_nowpass").val("").focus();
				}else{
					layer.alert('密码修改失败！', {icon: 2});
				}
			},
			error: function(data){
				layer.alert('操作失败请联系管理员！', {icon: 2});
			}
		})
	}
	
	
</script>